<template>
	<view class="content" v-if="pageFlag">
		<u-navbar title="会员详情" height="88rpx" :placeholder='true' titleStyle='color:#fff;font-size:32rpx'
			leftIconColor="#fff" left-icon-size="32rpx" :titleStyle='titleStyle' bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="refund_content">
			<view class="member_info">
				<view class="order_info">
					<view class="info_item">
						<view class="left">手机号码</view>
						<view class="right">{{member.phone}}</view>
					</view>
					<view class="info_item">
						<view class="left">姓名</view>
						<view class="right">{{member.name}}</view>
					</view>
					<view class="info_item">
						<view class="left">性别</view>
						<view class="right">{{sex(member.sex)}}</view>
					</view>

					<view class="info_item">
						<view class="left">是否解除绑定</view>
						<view class="right">
							<view class="updata" @click="reshow=true">
								解绑
							</view>
						</view>
					</view>
				</view>
				<u-modal :show="reshow" @confirm="reconfirm" @cancel="reshow=false" showCancelButton :title="title">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-modal>
				<view class="info_bar">
					<image src="../../static/images/main-product/gh_14cf42d05960_430.jpg" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="binding">
			<text>绑定员工</text>
			<view class="">{{member.employeeName}}</view>
		</view>

		<view class="bar_code">
			<view class="bar_content">
				<view class="bar_title">
					会员储存卡
				</view>
				<view class="bar_image">
					<view class="bilateral">
					</view>
					<view class="bar_code_image">
						<image :src="baseUrl+'/files/'+member.xxx.split('/')[member.xxx.split('/').length-1]" mode=""></image>
						<!-- <image src="../../../static/images/mine/条形码 1@2x.png" mode=""></image> -->
						<!-- 	<view class="">
							6216617167771303772
						</view> -->
					</view>
					<view class="bilateral">

					</view>
				</view>
			</view>
		</view>

		<view class="tab">
			<u-tabs :inactiveStyle="inactiveStyle33" :activeStyle='activeColor' lineWidth='355rpx' lineHeight="4rpx"
				lineColor="#FF594D" :itemStyle="itemStyle" :list="list1" @click="tabClick"></u-tabs>
		</view>
		<view class="refill_record" v-if="detailIndex==0">
			<view class="refill_content">
				<view class="refill_title">
					充值退款记录
				</view>
				<view class="money_list">
					<template v-for="(item,index) in rechargeData">
						<view class="money_item" :key="index">
							<view class="top">
								<view class="left">
									金额：<text>{{item.balanceIncrement}}元</text>
								</view>
								<view class="right">
									{{recahrgeStatus(item.status)}}
								</view>
							</view>
							<view class="time">
								{{item.createTime}}
							</view>
						</view>
						<view class="line">
							<u-line></u-line>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="refill_record" v-else>
			<view class="refill_content">
				<view class="refill_title">
					待核销商品
				</view>
				<view class="money_list">
					<template v-for="(item,index) in pickData">
						<view class="money_item" :key="index">
							<view class="top">
								<view class="left">
									名称：<text>{{item.name}}</text>
								</view>
								<view class="right">
									待核销
								</view>
							</view>
							<view class="time">
								{{item.orderTime}}
							</view>
						</view>
						<view class="line">
							<u-line></u-line>
						</view>
					</template>
				</view>
			</view>
		</view>

		<u-popup :show="delModel_show" round="10" mode="center">
			<view class="delModel">
				<view class="delText">
					充值金额
				</view>
				<view class="money">
					<u--input fontSize="24rpx" v-model="balanceIncrement" type='digit' placeholder='请输入金额'
						:customStyle='inpCustomStyle'>
					</u--input>
				</view>
				<u-line></u-line>
				<view class="operation">
					<view @click="delModel_show = false" class="btn operation_left">
						取消
					</view>
					<u-line direction='col'></u-line>
					<view @click="toUp" class="btn operation_right">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view class="bottom">
			<view class="left" @click="delModel_show = true">
				充值
			</view>
			<u-line direction='col' color="#fff"></u-line>
			<view class="right" @click="navigateTo('/pages_spell/pages/product-consign/product-consign')">
				产品寄存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberInfo,
		recharge,
		rechargePay,
		pickList,
		rechargeList
	} from '../../../api/employee.js'
	import baseUrl from '../../../utils/base.js'
	export default {
		onLoad(option) {
			if (option.id) {
				this.getMemberInfo(option.id)
			}
		},
		data() {
			return {
				titleStyle: {
					color: '#fff'
				},
				delModel_show: false,
				reshow: false,
				title: '标题',
				content: '确定解绑？',
				baseUrl,
				list1: [{
					name: '充值记录',
				}, {
					name: '待核销商品',
				}],
				itemStyle: {
					width: '355rpx',
					height: '76rpx',
					margin: '0',
					padding: '0',
					'font-size': '26rpx',
				},
				activeColor: {
					'font-size': '26rpx',
					color: '#D54939',
					'font-weight': '800',
					'bottom': '0'
				},
				inpCustomStyle: {
					border: 0,
					'border-radius': '10rpx',
					'background-color': '#f3f3f3',
					'box-sizing': 'border-box',
					padding: '20rpx 30rpx',
					color: "#D4D4D4"
				},
				member: {

				},
				pageFlag: false,
				balanceIncrement: '',
				number: '',
				inactiveStyle33: {
					color: '#777777',
					'font-size': '26rpx',
				},
				detailIndex: 0,
				pickData: [],
				rechargeData: [],
				recahrgeOption: [{
					label: '充值失败'
				}, {
					label: '充值失败'
				}, {
					label: '充值成功'
				}, ]
			}
		},
		computed: {

		},
		methods: {
			reconfirm() {
				this.reshow = false
				setTimeout(() => {
					uni.showToast({
						title: '员工客户有效关系唯一,不允许解绑',
						icon: 'none'
					})
				}, 500)
			},
			recahrgeStatus(status) {
				return this.recahrgeOption[status]['label']
			},
			// async memberRecharge(data) {
			// 	const res = await recharge(data)
			// 	console.log(res);
			// },
			async getMemberInfo(id) {
				const res = await memberInfo(id)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
					return
				}
				this.member = res.data
				this.getRechargeList(this.member.id)
				this.getPickList(this.member.userId)
				this.pageFlag = true
			},
			async getPickList(userId) {
				const res = await pickList(userId)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
				this.pickData = res.data
			},
			async getRechargeList(userId) {
				const res = await rechargeList(userId)
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
				this.rechargeData = res.rows
			},
			async toUp() {
				if (this.balanceIncrement <= 0) {
					uni.showToast({
						title: '金额不能小于0',
						icon: 'error'
					})
					return
				}
				if (!Boolean(this.balanceIncrement - 0)) {
					uni.showToast({
						title: '金额为小数整数',
						icon: 'error'
					})
					return
				}
				this.delModel_show = false;
				const res = await recharge({
					userId: this.member.id,
					customerUid: this.member.memberybDTO.customerInfo.customerUid,
					balanceIncrement: this.balanceIncrement,
					employeeId: this.member.employeeId
				})
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
					return
				}
				this.number = res.data.number
				console.log({
					number: this.number
				});
				const payRes = await rechargePay({
					number: this.number
				})
				console.log(payRes);
				if (payRes.code != 200) {
					uni.showToast({
						title: payRes.msg,
						icon: 'error'
					})
					return
				}
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: payRes.data.nonceStr,
					paySign: payRes.data.paySign,
					package: payRes.data.packageStr,
					signType: payRes.data.signType,
					timeStamp: payRes.data.timeStamp,
					success(request) {
						console.log(request);
						if (request.errMsg == 'requestPayment:ok') {
							uni.showToast({
								title: '充值成功'
							})
						}
					},
					fail(err) {
						console.log('失败', err);
					}
				})

			},
			tabClick(item) {
				// console.log(item);
				this.detailIndex = item.index
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			change(value) {
				console.log(value);
			},
		},
		computed: {
			sex(data) {
				return function(data) {
					if (data == 1) {
						return '男'
					} else if (data == 0) {
						return '女'
					} else {
						return '未填写'
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.u-safe-area-inset-bottom {
			padding-bottom: 0;
		}

		.refund_btn {
			width: 400rpx;
			height: 58rpx;
			background: #FF594D;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			text-align: center;
			line-height: 58rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 100rpx;
			margin-left: 175rpx;
		}

		// padding-top: 35rpx;
		.tab {
			background-color: #fff;
			// padding: 0 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.bar_code {
			padding: 20rpx 20rpx;

			.bar_content {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;

				.bar_title {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333332;
					padding-bottom: 20rpx;
				}
			}

			.bar_image {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bilateral {
					text-align: center;
				}

				.bar_code_image {
					width: 484rpx;
					// height: 154rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: center;

					image {
						width: 484rpx;
						height: 154rpx;
					}

					view {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #000000;
						text-align: center;
						width: 100%;
					}
				}
			}
		}

		.refill_record {
			padding: 20rpx;

			.refill_content {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;

				.refill_title {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #000000;
					padding-bottom: 14rpx;
				}

				.money_list {
					.money_item {

						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;

						.top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-bottom: 14rpx;

							.left {
								text {
									color: #FF594D;
								}
							}
						}
					}
				}
			}
		}

		.order_content_wrap {
			padding: 0 20rpx;
		}

		.refund_content {
			padding: 0 20rpx;

			.order_info {
				background-color: #fff;

				.info_item {
					width: 428rpx;
					display: flex;
					align-items: center;
					padding-bottom: 28rpx;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right: 22rpx;

					&:last-of-type {
						padding-bottom: 0rpx;
					}

					.left {
						width: 200rpx;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
					}

					.right {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;
						display: flex;

						.updata {
							width: 101rpx;
							height: 34rpx;
							border-radius: 10rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							background-color: #FF594D;
							color: #FFFFFF;
							line-height: 30rpx;
							text-align: center;
							margin-left: 20rpx;
						}
					}

				}
			}

			.member_info {
				display: flex;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 57rpx 20rpx;

				.info_bar {
					width: 220rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #000000;
					text-align: center;
					padding-left: 14rpx;

					image {
						width: 220rpx;
						// height: 126rpx;
					}
				}
			}
		}

		.binding {
			margin: 20rpx 20rpx 0;
			padding: 30rpx 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #777777;
			width: 710rpx;
			height: 76rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-sizing: border-box;

			text {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				padding-right: 20rpx;
			}
		}

		.bottom {
			width: 752rpx;
			height: 120rpx;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left,
			.right {
				flex: 1;
				height: 120rpx;
				background: #FF594D;
				text-align: center;
				line-height: 120rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
			}

			.left {}

			.right {}
		}

		.delModel {
			width: 690rpx;
			box-sizing: border-box;

			.delTitle {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				display: flex;
				justify-content: space-between;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.delText {
				text-align: center;
				padding: 40rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
			}

			.money {
				padding: 0 45rpx 82rpx;
			}

			.operation {
				display: flex;
				justify-content: center;
				height: 110rpx;

				.btn {
					width: 345rpx;
					height: 100%;
					line-height: 56rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FF594D;
					text-align: center;
					line-height: 110rpx;
					box-sizing: border-box;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}
		}

		.line {
			padding: 20rpx 0;
		}
	}
</style>